<template>
  <div>
    <div class="header">
      <div class="wrap">
        <!-- 首页logo -->
        <div class="header-img">
          <img src="../assets/img/logo_03.png" alt="" />
          <div class="header-img-text">
            <p>蓝 莓 派</p>
            <h3>和音乐一起分享时光</h3>
          </div>
        </div>
        <!-- 导航条 -->
        <div class="header-nav">
          <router-link
            v-for="(item, index) in siteArr"
            :key="index"
            :to="'/' + item.site"
          >
            <li
              :class="['active', { active1: currentIndex === item.id }]"
              @click="activeHandle(item.id, item.site)"
            >
              {{ item.title }}
            </li>
          </router-link>
        </div>
        <!-- 搜索框 -->
        <div class="search-box">
          <input type="text" class="search" />
          <div class="search-icon-backgrout">
            <span class="iconfont search-icon">&#xe605;</span>
          </div>
        </div>
        <!-- 登录 -->
        <div class="login-box" v-if="!user.flag">
          <router-link to="/login">
            <li
              :class="['active', { active1: currentIndex === 10000 }]"
              @click="activeHandle(10000, 'login')"
            >
              登录
            </li>
          </router-link>
          <router-link to="/sign">
            <li
              :class="['active', { active1: currentIndex === 10001 }]"
              @click="activeHandle(10001, 'sign')"
            >
              注册
            </li>
          </router-link>
        </div>
        <div class="login-box" v-else>
          <div
            class="active"
            @mouseover="toUserHandle"
            @mouseleave="onUserHandle"
            @click="activeHandle(100000)"
          >
            {{ user.username }}
            <div v-if="isFlag" class="user-nav">
              <div class="liubai"></div>
              <div class="user-nav-box">
                <UserNav />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view />
    <HomeFooter />
  </div>
</template>

<script>
import HomeFooter from "./HomeFooter";
import { mapMutations } from "vuex";
import UserNav from "./UserNav";
export default {
  components: {
    HomeFooter,
    UserNav,
  },
  data() {
    return {
      isFlag: true,
      // 登录状态
      user: {
        flag: false,
        username: "",
      },
      // 用户名
      username: "iwen@qq.com",
      // 导航的数组
      siteArr: [
        {
          id: 1001,
          site: "",
          title: "首页",
        },
        {
          id: 1002,
          site: "movement",
          title: "乐章",
        },
        {
          id: 1003,
          site: "hear",
          title: "听说",
        },
        {
          id: 1004,
          site: "joy",
          title: "乐趣",
        },
        {
          id: 1005,
          site: "talk",
          title: "聊聊",
        },
        {
          id: 1006,
          site: "travelnotes",
          title: "游记",
        },
        {
          id: 1007,
          site: "photography",
          title: "摄影",
        },
        {
          id: 1008,
          site: "eslite",
          title: "诚品",
        },
        {
          id: 1009,
          site: "blueberryjam",
          title: "蓝莓酱",
        },
        {
          id: 1010,
          site: "community",
          title: "社区",
        },
      ],
      // 高亮的位置
      currentIndex: 1001,
    };
  },

  methods: {
    ...mapMutations("login", ["setUser"]),
    // 选中高亮
    activeHandle(index, site) {
      localStorage.setItem("currentIndex", index);
      this.currentIndex = index;
    },
    // 鼠标移入个人
    toUserHandle() {
      this.isFlag = true;
    },
    // 鼠标移出个人
    onUserHandle() {
      this.isFlag = false;
    },
  },
  mounted() {
    this.$bus.$on("msg", (data) => {
      this.user = data;
    });
    this.$bus.$on("currentindex", (data) => {
      this.currentIndex = data;
    });
    if (localStorage.getItem("blueberryUser")) {
      this.user = JSON.parse(localStorage.getItem("blueberryUser"));
    }
    if (localStorage.getItem("currentIndex")) {
      this.currentIndex = Number(localStorage.getItem("currentIndex"));
    }
    this.$bus.$on("UserFlag", (data) => {
      this.user.flag = data;
    });
  },
};
</script>

<style lang='less' scoped>
.header {
  width: 100%;
  background-color: rgb(36, 41, 44);
  height: 90px;
}
.header a {
  color: #fff;
}
.wrap {
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
.header-img {
  width: 191px;
  height: 90px;
  float: left;
  img {
    float: left;
    margin-top: 25px;
  }
  .header-img-text {
    margin: 22px 0 0 15px;
    width: 110px;
    height: 46px;
    float: left;
    color: #fff;
    p {
      font-size: 24px;
      font-family: "幼圆";
      font-weight: 700;
      text-align: center;
    }
    p::after {
      content: "";
      display: block;
      background-color: white;
      height: 1px;
      margin: 2px 0;
    }
    h3 {
      font-size: 10px;
      margin-left: -4px;
      font-family: "幼圆";
      height: 13.6px;
    }
  }
}
.header-nav {
  margin-left: 40px;
  width: 610px;
  height: 90px;
  float: left;
  line-height: 90px;
}
// 未选中的样式
.active {
  padding: 2px 9px;
  border-radius: 3px;
  display: inline;
  color: #fff;
  cursor: pointer;
}
// 选中的样式
.active1 {
  background-color: #109d59;
  position: relative;
  display: inline;
}
.active1::after {
  content: "";
  border-top: 0;
  position: absolute;
  bottom: -35px;
  left: 12px;
  border-bottom: 10px solid #fff;
  border-left: 10px solid rgba(0, 0, 0, 0);
  border-right: 10px solid rgba(0, 0, 0, 0);
}
.login-box {
  height: 90px;
  line-height: 90px;
  position: absolute;
  top: 0;
  right: 0;
}
.login-box a {
  padding-left: 5px;
}
.login-user-name {
  display: none;
}
.search-box {
  width: 170px;
  height: 30px;
  margin: 30px 0 0 0;
  background-color: #000;
  border-radius: 30px;
  float: left;
  overflow: hidden;

  .search-icon-backgrout {
    width: 30px;
    height: 30px;
    background-color: #109d59;
    float: right;
    cursor: pointer;
    .search-icon {
      color: #fff;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
    }
  }
  .search {
    height: 100%;
    width: 100px;
    background-color: #000;
    color: #fff;
    margin-left: -20px;
    text-align: left;
  }
}
.user-nav {
  width: 100px;
  min-height: 90px;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 999;
}
.liubai {
  height: 90px;
  width: 100%;
  background: rgba(0, 0, 0, 0);
}
.user-nav-box {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 0;
}
</style>